<template>
  <div class="box">
    <van-nav-bar
      title="通知"
      left-arrow
      @click-left='$router.go(-1)'
      fixed
    />
    <Loading v-if="!data.message_type" />
    <div v-else>
      <section>
        <div class='content'>
          <div class="avater">
            <van-image width="0.39rem"
              height="0.39rem"
              round
              :src="data.message_uservia"
            />
            <p>
              <span>{{ data.message_nickname }}</span>
              <i>{{ data.message_timer }}创建</i>
            </p>
          </div>
          <div id="content-body" v-html="data.message_content"></div>
        </div>
        <div class="issue" v-if="data.NoticeMan.length !== 0">
          <h3>问题</h3>
          <div class="comment" v-for="(item, index) in data.NoticeMan" :key="index">
            <div class="issue_message">
              <img :src="item.notice_user" alt="">
              <p>{{item.notice_via}}</p>
            </div>
            <div class="issue_content">{{item.notice_content}}</div>
          </div>
        </div>
      </section>
      <div class="refoot">
        <input type="text" placeholder="评论赢大奖" maxlength="200" :value="value" @keydown="keyDown" @change="clearInput">
        <span @click="like">
          <van-icon v-if="refootLickShowBool" class="refoot_icon" name="like-o" />
          <van-icon v-else class="refoot_iconSelect" name="like" />
          <b>{{data.message_num_like}}</b>
          <!-- <b>100</b> -->
        </span>
        <span @click="star">
          <van-icon v-if="refootCollectShowBool" class="refoot_icon" name="star-o" />
          <van-icon v-else class="refoot_iconSelect" name="star" />
          <b>{{data.message_num_collect}}</b>
          <!-- <b>100</b> -->
        </span>
        <span>
          <van-icon class="refoot_icon" name="chat-o" />
          <b>{{data.NoticeMan.length}}</b>
          <!-- <b>100</b> -->
        </span>
      </div>
    </div>
  </div>
</template>

<script>
import Loading from '../../components/loading'
import Vue from 'vue'
import { NavBar, Icon, ActionSheet, Image, Toast } from 'vant'
import { informDetail, getNoticeCollect, addNoticeComment, getUserMessage } from '@/api'
Vue.use(NavBar)
Vue.use(Icon)
Vue.use(ActionSheet)
Vue.use(Image)
Vue.use(Toast)
export default {
  data () {
    return {
      isLike: false, // 判断是否点赞
      isFavorites: false, // 判断是否收藏
      shows: false, // 弹框
      data: [],
      refootLickShowBool: true,
      refootCollectShowBool: true,
      value: '',
      messageId: '',
      loginState: localStorage.getItem('loginState_AM')
    }
  },
  components: {
    Loading
  },
  mounted () {
    // console.log(this.data.message_type)
    // console.log(this.$route.query)
    this.messageId = this.$route.query.message_id
    this.getInformDetail()
  },
  updated () {
    const p = document.getElementById('content-body').getElementsByTagName('p')
    p.forEach(item => {
      item.style.textIndent = '2em'
    })
  },
  methods: {
    keyDown (e) {
      const key = window.event.keyCode
      if (key === 13) {
        if (this.loginState === 'no' || this.loginState === null) {
          Toast('您还没有登录，快去登录吧')
          setTimeout(() => {
            this.$router.push('/login')
          }, 300)
        } else {
          if (e.target.value !== '') {
            getUserMessage({
              username: localStorage.getItem('userTel_AM'),
              token: localStorage.getItem('token_AM')
            }).then(res => {
              if (res.data.code === '200') {
                const userobj = res.data.data[0]
                // console.log(userobj)
                const discussObj = {
                  no_id: this.messageId,
                  notice_user: userobj.uservia,
                  notice_via: userobj.usernickname === '用户昵称' ? '爱美用户' : userobj.usernickname,
                  notice_content: e.target.value,
                  username: userobj.username
                }
                // console.log(discussObj)
                addNoticeComment({ discussObj }).then(res => {
                  // console.log(res)
                  if (res.data.code === '200') {
                    Toast('添加成功')
                    this.clearInput()
                    // console.log(this.value)
                    this.getInformDetail()
                  }
                })
              }
            })
          }
        }
        // console.log(e.target.value)
      }
    },
    clearInput () {
      this.value = ''
    },
    getInformDetail () {
      informDetail({
        message_id: this.messageId,
        username: localStorage.getItem('userTel_AM') ? localStorage.getItem('userTel_AM') : '11000000000'
      }).then(res => {
        if (res.data.code === '200') {
          this.data = res.data.data[0]
          // console.log(this.data)
          if (this.data.isup === 1) {
            this.refootLickShowBool = false
          } else {
            this.refootLickShowBool = true
          }
          if (this.data.iscollect === 1) {
            this.refootCollectShowBool = false
          } else {
            this.refootCollectShowBool = true
          }
        }
      })
    },
    // 点赞事件
    like () {
      if (this.loginState === 'no' || this.loginState === null) {
        Toast('您还没有登录，快去登录吧')
        setTimeout(() => {
          this.$router.push('/login')
        }, 300)
      } else {
        if (this.refootLickShowBool) {
          getNoticeCollect({
            username: localStorage.getItem('userTel_AM'),
            message_id: this.messageId,
            // message_id: 600001,
            like: 1,
            collect: 2
          }).then(res => {
            if (res.data.code === '200') {
              this.refootLickShowBool = false
              Toast('已点赞')
              this.data.message_num_like = this.data.message_num_like * 1 + 1
            }
          })
        } else {
          getNoticeCollect({
            username: localStorage.getItem('userTel_AM'),
            message_id: this.messageId,
            // message_id: 600001,
            like: 0,
            collect: 2
          }).then(res => {
            if (res.data.code === '200') {
              this.refootLickShowBool = true
              Toast('取消点赞')
              this.data.message_num_like = this.data.message_num_like * 1 - 1
            }
          })
        }
      }
    },
    // 收藏事件
    star () {
      if (this.loginState === 'no' || this.loginState === null) {
        Toast('您还没有登录，快去登录吧')
        setTimeout(() => {
          this.$router.push('/login')
        }, 300)
      } else {
        if (this.refootCollectShowBool) {
          getNoticeCollect({
            username: localStorage.getItem('userTel_AM'),
            message_id: this.messageId,
            // message_id: 600001,
            like: 2,
            collect: 1
          }).then(res => {
            if (res.data.code === '200') {
              this.refootCollectShowBool = false
              Toast('已收藏')
              this.data.message_num_collect = this.data.message_num_collect * 1 + 1
            }
          })
        } else {
          getNoticeCollect({
            username: localStorage.getItem('userTel_AM'),
            message_id: this.messageId,
            // message_id: 600001,
            like: 2,
            collect: 0
          }).then(res => {
            if (res.data.code === '200') {
              this.refootCollectShowBool = true
              Toast('取消收藏')
              this.data.message_num_collect = this.data.message_num_collect * 1 - 1
            }
          })
        }
      }
    }
  }
}
</script>

<style lang="scss" scoped>
section {
  flex: 1;
  overflow: auto;
  margin-bottom: 0.44rem;
  margin-top: 0.46rem;
  .content{
    height: 100%;
    padding: 0 0.2rem;
    .avater {
      display: flex;
      height: 0.39rem;
      align-items: center;
      margin-top: 0.17rem;
      p {
        display: flex;
        flex-direction: column;
        margin-left: 0.09rem;
        span {
          font-size: 0.13rem;
          font-weight:500;
          color:rgba(51,51,51,1);
        }
        i {
          font-weight:400;
          color:rgba(102,102,102,1);
          font-size:0.09rem;
        }
      }
    }
    #content-body {
      margin-top: 0.215rem;
      font-size: 0.13rem;
      font-weight: 500;
      line-height: 0.19rem;
      color:rgba(51,51,51,1);
    }
  }
  .issue {
    width: 100%;
    height: auto;
    padding: 0 0.2rem;
    margin-bottom: 0.2rem;
    margin-top: 0.2rem;
    h3 {
      height: 0.16rem;
      line-height: 0.16rem;
      font-size: 0.14rem;
      margin-left: 0.2rem;
      color: #333333;
      margin-bottom: 0.2rem;
    }
    .comment {
      margin-bottom: 0.2rem;
    }
    .issue_message {
      width: 100%;
      height: 0.3rem;
      margin-bottom: 0.1rem;
      img {
        width: 0.3rem;
        height: 0.3rem;
        float: left;
        margin-right: 0.1rem;
        border-radius: 50%;
        border: 1px solid #e5e5e5;
        box-sizing: border-box;
      }
      p {
        float: left;
        max-width: 2rem;
        overflow:hidden;
        color: #999999;
        font-size: 0.12rem;
        line-height: 0.12rem;
        margin-top: 0.12rem;
        text-overflow:ellipsis;
        white-space:nowrap
      }
    }
    .issue_content {
      max-width: 2.9rem;
      height: auto;
      box-sizing: border-box;
      margin-left: 0.4rem;
      text-align: left;
      font-size: 0.12rem;
      color: #666666;
      line-height: 0.14rem;
      word-wrap: break-word;
    }
  }
}
.refoot {
  height: 0.44rem;
  position: fixed;
  bottom: 0;
  width: 100%;
  padding: 0 0.1rem;
  background: white;
  input {
    width: 1.9rem;
    height: 0.3rem;
    margin: 0.07rem 0;
    border: 1px solid #f0f0f0;
    border-radius: 0.15rem;
    float: left;
    padding: 0 0.1rem;
    line-height: 0.3rem;
  }
  span {
    float: left;
    margin-left: 0.1rem;
    width: 0.45rem;
    height: 0.44rem;
    line-height: 0.44rem;
    b {
      line-height: 0.44rem;
      float: left;
      color: #828282;
      margin-left: 0.04rem;
    }
    .refoot_icon {
      font-size: 0.2rem;
      line-height: 0.44rem;
      float: left;
      color: #828282;
    }
    .refoot_iconSelect {
      font-size: 0.2rem;
      line-height: 0.44rem;
      color: #ff5959;
      float: left;
    }
  }
}
/deep/ .van-nav-bar {
  z-index: 100;
}
/deep/ .van-icon-arrow-left {
  font-size: 0.22rem;
  color: #171717;
}
/deep/ .van-nav-bar__title {
  font-size: 0.18rem;
  color: #171717;
  font-weight: bold;
}
</style>
